<!doctype html>
<html>
	<head>
	<meta charset="utf-8">
	<title>局域网共享</title>
	  <link href="js/videojs/video-js.css" rel="stylesheet">
	  <link href="js/videojs-playlist-ui.css" rel="stylesheet">
	<style>
 .player-container, .vjs-playlist {
      height: 300px;
    }
	/*
  We include some minimal custom CSS to make the playlist UI look good
  in this context.
*/

body {
  font-family: Arial, sans-serif;
}

.info {
  background-color: #eee;
  border: thin solid #333;
  border-radius: 3px;
  margin: 0 0 20px;
  padding: 0 5px;
}

.player-container {
  background: #1a1a1a;
  overflow: auto;
  width: 900px;
  margin: 0 0 20px;
}

.video-js {
  float: left;
}

.vjs-playlist,
.my-custom-class,
#my-custom-element {
  float: left;
  width: 300px;
}

.vjs-playlist.vjs-playlist-horizontal {
  float: none;
  height: 120px;
  width: 600px;
}

</style>
	</head>

	<body>
    <div class="m">
      <video id="my-video" class="video-js" controls preload="auto" width="960" height="400"
	   playsinline="true"
            webkit-playsinline="true"
            x-webkit-airplay="allow"
            x5-video-player-type="h5-page"
            x5-video-player-fullscreen="true"
		   data-setup="{}">
		
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
		<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    	<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
    	<!--
		
          <source src="http://192.168.3.84:8000/td/aa.avi" type="video/mp4">
          <source src="http://192.168.3.84:8000/td/bb.avi" type="video/ogg">
          <source src="http://192.168.3.84:8000/td/cc.avi" type="video/webm">
		  
		  
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
		<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
    	<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
		
		-->
        <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p>
      </video>
	  
    <div class="vjs-playlist">
      <!--
        The contents of this element will be filled based on the
        currently loaded playlist
      -->
    </div>
      <script src="js/jquery-3.7.1.min.js"></script> 
  <script src="js/videojs/video.js"></script>
  <script src="js/videojs-playlist.js"></script>
  <script src="js/videojs-playlist-ui.js"></script>
      <script type="text/javascript">
	  var globalList=[]
		  //设置中文
		  videojs.addLanguage('zh-CN', {
			  "Play": "播放",
			  "Pause": "暂停",
			  "Current Time": "当前时间",
			  "Duration": "时长",
			  "Remaining Time": "剩余时间",
			  "Stream Type": "媒体流类型",
			  "LIVE": "直播",
			  "Loaded": "加载完毕",
			  "Progress": "进度",
			  "Fullscreen": "全屏",
			  "Non-Fullscreen": "退出全屏",
			  "Mute": "静音",
			  "Unmute": "取消静音",
			  "Playback Rate": "播放速度",
			  "Subtitles": "字幕",
			  "subtitles off": "关闭字幕",
			  "Captions": "内嵌字幕",
			  "captions off": "关闭内嵌字幕",
			  "Chapters": "节目段落",
			  "Close Modal Dialog": "关闭弹窗",
			  "Descriptions": "描述",
			  "descriptions off": "关闭描述",
			  "Audio Track": "音轨",
			  "You aborted the media playback": "视频播放被终止",
			  "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
			  "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
			  "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
			  "No compatible source was found for this media.": "无法找到此视频兼容的源。",
			  "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
			  "Play Video": "播放视频",
			  "Close": "关闭",
			  "Modal Window": "弹窗",
			  "This is a modal window": "这是一个弹窗",
			  "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
			  ", opens captions settings dialog": ", 开启标题设置弹窗",
			  ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
			  ", opens descriptions settings dialog": ", 开启描述设置弹窗",
			  ", selected": ", 选择",
			  "captions settings": "字幕设定",
			  "Audio Player": "音频播放器",
			  "Video Player": "视频播放器",
			  "Replay": "重播",
			  "Progress Bar": "进度小节",
			  "Volume Level": "音量",
			  "subtitles settings": "字幕设定",
			  "descriptions settings": "描述设定",
			  "Text": "文字",
			  "White": "白",
			  "Black": "黑",
			  "Red": "红",
			  "Green": "绿",
			  "Blue": "蓝",
			  "Yellow": "黄",
			  "Magenta": "紫红",
			  "Cyan": "青",
			  "Background": "背景",
			  "Window": "视窗",
			  "Transparent": "透明",
			  "Semi-Transparent": "半透明",
			  "Opaque": "不透明",
			  "Font Size": "字体尺寸",
			  "Text Edge Style": "字体边缘样式",
			  "None": "无",
			  "Raised": "浮雕",
			  "Depressed": "压低",
			  "Uniform": "均匀",
			  "Dropshadow": "下阴影",
			  "Font Family": "字体库",
			  "Proportional Sans-Serif": "比例无细体",
			  "Monospace Sans-Serif": "单间隔无细体",
			  "Proportional Serif": "比例细体",
			  "Monospace Serif": "单间隔细体",
			  "Casual": "舒适",
			  "Script": "手写体",
			  "Small Caps": "小型大写字体",
			  "Reset": "重启",
			  "restore all settings to the default values": "恢复全部设定至预设值",
			  "Done": "完成",
			  "Caption Settings Dialog": "字幕设定视窗",
			  "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
			  "End of dialog window.": "结束对话视窗"
			});
		  
		  
		  
		  
		  var domain = window.location.host;
		  var port = location.port; 
		  var winUrl = window.location.href
		  winUrl="http://"+domain
			
			
			
			/***  ***/
			
			function treeToList(tree,path){
				//console.log("treeToList.path",path)
				var list=[]
				for (var i = 0; i < tree.length; i++) { 
					const fileInfo=tree[i];
					//console.log("treeToList.i",i)
					//console.log("treeToList.fileInfo",fileInfo)
					if(fileInfo.type == 0){
						//console.log("treeToList.type=0")
						var tmp=treeToList(fileInfo.childs,path+'/'+fileInfo.name)
						list=list.concat(tmp)
					}else{
						if(!fileInfo.name.endsWith('.jpg')){
							list.push({
								'path': path,
								'name': fileInfo.name,
								'url': winUrl+fileInfo.url
							})
						}
					}
				}
				return list
			}
			
			function videoChangeUrl(ind){
			//video/mp4
			//application/x-mpegURL
				const tmp=globalList[ind]
				console.log('videoChangeUrl.tmp',tmp)
				myPlayer.src({
				  src: tmp.url,
				  type: 'video/mp4'
				});
				myPlayer.play();
			}
			
		console.log("aa")
		var videoOption={
                autoplay: true,
                controls: true,
                preload: 'auto',
                playbackRates: [0.2, 0.5, 1, 1.5, 2, 2.5, 3],//视频播放速度
                // aspectRatio: '16:9',//宽高比，9:16 16:9 4:3等等  设置后width和height属性无效
                // fluid: true,//自动计算宽高 ，若设置了aspectRatio，则失效
                // liveui: true,//不知


                userActions: {
                    doubleClick: false,// 双击全屏 boolean|function 

                    // 热键
                    //     hotkeys(event) {
                    //         // 'x'  键 - 暂停
                    //         if (event.which === 88) {
                    //             this.pause();
                    //         }
                    //         // `y` 键 - 播放
                    //         if (event.which === 89) {
                    //             this.play();
                    //         }
                    //     },//热键
                },

                language: 'zh-CN',
                controlBar: {
                    children: [
                        { name: 'playToggle' }, // 播放按钮
                        { name: 'currentTimeDisplay' }, // 当前已播放时间
                        { name: 'progressControl' }, // 播放进度条
                        { name: 'durationDisplay' }, // 总时间
                        { name: 'audioTrackButton' },
                        { // 倍数播放
                            name: 'playbackRateMenuButton',
                        },
                        // {
                        //     name: 'volumePanel', // 音量控制
                        //     inline: false, // 不使用水平方式
                        // },
                    ],
                    PictureInPictureToggle: true,  //画中画

                    // 是否显示全屏按钮
                    fullscreenToggle: true,

                    // 音量是否在一行上显示
                    // volumePanel: {
                    //     // true 同一行显示音量调整
                    //     // false 竖直显示音量调整
                    //     inline: false
                    // },

                    // 视频播放完时触发
                    // true 显示回放图标
                    // false 显示暂停图标
                    playToggle: {
                        replay: true
                    }
                }}
		
		const player=videojs("my-video",videoOption)
		
		
		
			 $.ajax({url:"/api/json",success:function(result){
				globalList=treeToList(result,'')
				console.log("list",globalList)
				var element=document.getElementById("div1");
				const plist=[]
				for (i = 0; i < globalList.length; i++) { 
					const fileInfo=globalList[i];
					//console.log("fileInfo3b",fileInfo)
					var t='<a href="javascript:videoChangeUrl('+i+')">'+fileInfo.path+"/"+fileInfo.name+'</a>&nbsp;&nbsp;&nbsp;'; 
					$("#div1").append(t);   
					plist.push({
				  name: fileInfo.path+"/"+fileInfo.name,
				 // description: 'The film follows a girl named Sintel who is searching for a baby dragon she calls Scales.',
				  sources: [
					{ src: fileInfo.url, type: 'video/mp4' },
					{ src: fileInfo.url, type: 'video/webm' },
					{ src: fileInfo.url, type: 'video/ogg' }
				  ],
				  thumbnail: false
				})
				}
			 /***
 ***/
				//$("#div1").html('阿苏s');
				console.log(result)
				
				
				
				player.playlist(plist);

				// Initialize the playlist-ui plugin with no option (i.e. the defaults).
				player.playlistUi();
			}}); 
			
		
		</script> 
    </div>
		<div id="div1" style="color: red;">
		</div>
</body>
</html>
